<template>
	<view>
		<!-- 人员业绩明细 简要模式 -->
		<view v-if="radioValue == 1 && personPerformanceList.length>0">
			<view class="depart-title-content">
				<view class="depart-title-content-name">销售(部门)</view>
				<view class="depart-title-content-desk">订桌(桌/均)</view>
				<view class="depart-title-content-money">消费 / 完成率% / 充值</view>
			</view>
			<view class="performance-detail">
				<view class="performance-detail-content" v-for="(item,index) in personPerformanceList" :key="index" @click="choosePerson(item)">
					<view class="performance-detail-content-name">
						{{item.salesman_name}}({{item.depart_name}})
					</view>
					<view class="performance-detail-content-desk">
						{{formatNumber(item.all_effective_count)}}/{{formatNumber(item.room_avg_money)}}
					</view>
					<view class="performance-detail-content-money">
						<view>{{formatNumber(item.fact_performance)}} / {{formatNumber(item.objectives_rate)}} /
							{{formatNumber(item.charge_money)}}
						</view>
						<uni-icons type="right" size="15" :color="iconColor"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 销售业绩明细 详细模式 -->
		<view class="performance-detail" v-if="radioValue == 2 && personPerformanceList.length>0">
			<view class="performance-detail-content-detail-person" v-for="(item,index) in personPerformanceList"
				:key="index" @click="choosePerson(item)">
				<view class="detail-title">
					<view style="display: flex;flex-direction: row;">
						<view class="detail-name font-28">{{item.salesman_name}}</view>
						<view class="detail-name font-24">({{item.depart_name}})</view>
					</view>
					<view style="display: flex;flex-direction: row;">
						<view class="detail-target">目标：</view>
						<view class="detail-name font-24">
							{{formatNumber(item.performance_objectives)}}/{{formatNumber(item.objectives_rate)}}%
						</view>
						<uni-icons type="right" size="15" :color="iconColor"></uni-icons>
					</view>
				</view>
				<view class="line-split"></view>
				<view class="detail-body">
					<view class="detail-item">
						<view class="label">总消费：</view>
						<view class="value">{{formatNumber(item.total_money)}}</view>
					</view>
					<view class="detail-item">
						<view class="label">非业绩：</view>
						<view class="value">{{formatNumber(item.no_performance)}}</view>
					</view>
					<view class="detail-item align-end">
						<view class="label">业绩：</view>
						<view class="value">{{formatNumber(item.fact_performance)}}</view>
					</view>
				</view>

				<view class="detail-body">
					<view class="detail-item">
						<view class="label">总订桌：</view>
						<view class="value">{{formatNumber(item.all_room_count)}}</view>
					</view>
					<view class="detail-item">
						<view class="label">有效：</view>
						<view class="value">
							{{formatNumber(item.all_effective_count)}}/{{formatNumber(item.room_avg_money)}}</view>
					</view>
					<view class="detail-item align-end">
						<view class="label">无效：</view>
						<view class="value">{{formatNumber(item.all_no_effective_count)}}</view>
					</view>
				</view>

				<view class="detail-body">
					<view class="detail-item">
						<view class="label">充值：</view>
						<view class="value">{{formatNumber(item.charge_money)}}</view>
					</view>
					<view class="detail-item">
						<view class="label">提成：</view>
						<view class="value">{{formatNumber(item.commission_money)}}</view>
					</view>
					<view class="detail-item align-end">
						<view class="label">阶梯：</view>
						<view class="value">{{formatNumber(item.step_all_money)}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无业绩展示 -->
		<view class="depart-enpty" v-if="personPerformanceList.length==0 && loadingFlag==0">
			此日期未查询到人员业绩信息~
		</view>
	</view>
</template>

<script>
	export default {
		name: "personSales",
		props: {
			radioValue: {
				type: [String, Number],
				required: true
			},
			personPerformanceList: {
				type: Array,
				required: true
			},
			iconColor: {
				type: String,
				default: 'var(--grey-text)'
			},
			formatNumber: {
				type: Function,
				required: true
			},
			loadingFlag: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {

			};
		},
		methods: {
			choosePerson(item) {
				this.$emit('choose-person', item)
			}
		}
	}
</script>

<style scoped>
	.performance-detail-content-detail-person {
		height: 290rpx;
		background-color: var(--bg-center-color);
		border-radius: 10rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 20rpx;
	}
	.label {
		font-size: 24rpx;
		color: var(--grey-text);
	}
	
	.value {
		font-size: 24rpx;
		color: var(--white-text);
		font-weight: 600;
	}
	
	.detail-item {
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.detail-name {
		font-weight: 600;
		color: var(--white-text)
	}
	
	.align-end {
		justify-content: flex-end;
	}
	
	.detail-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 68rpx;
		align-items: center;
		line-height: 68rpx;
	}
	.performance-detail-content-name {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.detail-body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
	}
	
	.performance-detail-content-desk {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.performance-detail-content-money {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		text-align: right;
	}
	
	.detail-target {
		font-size: 24rpx;
		color: var(--grey-text);
	}
	
	.performance-detail-content-detail {
		height: 220rpx;
		background-color: var(--area-color);
		border-radius: 10rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 20rpx;
	}
	.performance-detail-content {
		height: 80rpx;
		background-color: var(--bg-center-color);
		border-radius: 10rpx;
		padding: 0 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: var(--white-text);
		margin-top: 20rpx;
	}
	.depart-enpty {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 24rpx;
		color: #717171;
		text-align: center;
		margin-top: 200rpx;
	}
	
	.depart-title-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 40rpx;
		margin-top: 16rpx;
		font-size: 24rpx;
		color: var(--grey-text);
	}
	
	.depart-title-content-name {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: start;
	}
	
	.depart-title-content-desk {
		width: 20%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.depart-title-content-money {
		width: 40%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	
	.performance-detail {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 30rpx;
	}
</style>